<template>
  <div class="bind-phone-background">
    <van-row type="flex" justify="space-around">
      <van-col span="24" class='bind-phone-title'>
        验证手机号
      </van-col>
    </van-row>
    <van-row type="flex" justify="space-around">
      <van-col span="24">
        <van-field class='bind-phone-field' type='tel' v-model="saveData.phoneNo" placeholder="请输入您的手机号" clearable @change.native='checkPhone()'/>
        <span class="bind-phone-errMsg">{{err.phoneNo}}</span>
      </van-col>
    </van-row>
    <van-row type="flex" justify="space-around">
      <van-col span="24">
        <van-field v-model="saveData.authCode" class='bind-phone-field' center clearable  placeholder="请输入短信验证码" @change.native='checkNumber()'>
          <van-button slot="button" size="small" type="primary" :disabled='!sandCode.sand' clearable @click.native='sendCode()'>{{sandCode.msg}}</van-button>
        </van-field>
        <span class="bind-phone-errMsg">{{err.authCode}}</span>
      </van-col>
    </van-row>
    <van-row type="flex" justify="space-around">
      <!--  -->
      <van-col span="24"><van-button :disabled='!cansave' class='bind-phone-submit'  type="default" @click.native='save()'>确认</van-button></van-col>
    </van-row>
  </div>
</template>
<script>
  import { findWxUserInfo } from '../../api/nearPark/nearPark'
  import { UserService} from '../personalCenter/api';
  import { Toast } from 'vant';
  import { Dialog } from 'vant';
  export default {
    name: 'ReserveBindNo',
    data() {
      return {
        cansave: false,
        alreadySaved: false,
        WXZQCode:'',
        WXUserInfo:'',
        saveData: {
          phoneNo: '',
          authCode: '',
          openid:''
        },
        sandCode: {
          msg: '发送验证码',
          time: 30,
          sand: false
        },
        err: {
          phoneNo: '',
          authCode: ''
        }
      };
    },
    created() {

    },
    watch: {
      saveData: {
        handler(newVal, oldVal) {
          let regPhone = /^[1][0-9]{10}$/;
          let regNumber = /^[0-9]{6}$/;
          if (regPhone.test(this.saveData.phoneNo) && regNumber.test(this.saveData.authCode) && this.saveData.openid) {
            this.cansave = true;
          } else {
            this.cansave = false;
          }
        },
        deep: true
      }
    },
    mounted(){
      this.WXZQCode=this.$route.query.code   //  章丘code
      this.saveData.openid=this.$route.query.openid
      var that=this
      //---获取绑定前的用户信息 主要用于判断是否绑定车辆
      findWxUserInfo(this.WXZQCode).then((res)=>{
        that.WXUserInfo=res
      })
    },
    methods: {
      checkPhone() {
        this.sandCode.sand = false;
        if (!this.saveData.phoneNo) {
          this.err.phoneNo = '* 请输入您的手机号';
          return false;
        }
        let reg = /^[1][0-9]{10}$/;
        if (!reg.test(this.saveData.phoneNo)) {
          this.err.phoneNo = '* 请输入正确的手机号';
          return false;
        } else {
          this.err.phoneNo = '';
          this.sandCode.sand = true;
          return true;
        }
      },
      checkNumber() {
        if (!this.saveData.authCode) {
          this.err.authCode = '* 请输入验证码';
          return false;
        }
        let reg = /^[0-9]{6}$/;
        if (!reg.test(this.saveData.authCode)) {
          this.err.authCode = '* 请输入正确的验证码';
          return false;
        } else {
          this.err.authCode = '';
          return true;
        }
      },

      sendCode() {
        UserService.sendAuthCode(this.saveData.phoneNo).then((res) => {
          // ${this.saveData.phoneNo},
          Toast(`验证码已发送至您的手机（有效期${res/60}分钟),请及时输入`);
          let djs = setInterval(() => {
            this.sandCode.time--;
            this.sandCode.msg = `${this.sandCode.time}秒后可重试`
            this.sandCode.sand = false;
            if (this.sandCode.time == 0) {
              clearInterval(djs);
              this.sandCode.time = 10;
              this.sandCode.msg = '发送验证码';
              this.checkPhone();
            }
          }, 1000)
        }, (err) => {
          this.checkPhone();
          Toast.fail('验证码发送失败,请重试');
        });
      },

      save() {
        var that=this
        UserService.LinkPhoneNo(this.saveData).then((res) => {
          // Toast.success('绑定成功');
          // setTimeout(function () {   //2秒后提示
            if(!that.WXUserInfo.haveBindCar){  //未绑定车辆
              Dialog.confirm({
                title: '手机号绑定成功',
                message: '<p style="text-align: center">查询到您还未绑定车辆，是否绑定</p>',
                confirmButtonText:'绑定车辆',
                cancelButtonText:'查询车场'
              }).then(() => {
                // on confirm    // -去绑车
                that.$router.replace({
                  path:'/ReserveBindCar',
                  query:{
                    openid: that.saveData.openid
                  }
                })
              }).catch(() => {
                // on cancel   //--返回去查车场
                that.$router.replace({
                  path:'/nearPark',
                  query:{
                    openid:that.saveData.openid
                  }
                })
              });
            }
          // },2000)
        }, (err) => {
          Toast.fail('绑定失败');
        });
      },
    },
  };
</script>
<style scoped>
  .bind-phone-background {
    position: absolute;
    top: 20px;
    left: 0px;
    height: 100vh;
    padding: 20px;
    width: 90%;
    text-align:center;

  }
  .bind-phone-field {
    border: 1px solid #b1baba;
    border-radius: 8px;
    margin: 3vh auto;
    width: 85vw;
  }
  .bind-phone-title {
    font-size: 43px;
    text-align: center;
    color: #30AFF7;
    padding: 4vh;
    width: 85vw;
  }
  .bind-phone-submit {
    /*background: #30AFF7;*/
    text-align: center;
    color: #ffffff;
    font-size: 23px;
    border-radius: 8px;
    margin: 3vh auto;
    width: 85vw;
  }

  .bind-phone-errMsg {
    float: left;
    color: red;
    display: inline-block;
    margin: 0 0 2% 3%;
  }

  .van-button--normal  {
    background: #30AFF7;
  }
  .van-button--disabled {
    color: #000000;
    background-color: #b2b2b2;
    border: 1px solid #e5e5e5;
  }
</style>
